<%@ include file="/includes/head.jsp" %>

<h4>Ejemplo 1</h4>
<span id="status">Hola mundo...</span><br/>


<h4>Ejemplo 2</h4>
<a href="/">Home</a>
<div id="links"> 
 <a href="http://google.com">Google</a> 
 <a href="http://ubuntu.com">Ubuntu</a> 
 <a href="http://debian.org">Debian</a> 
</div>

<h4>Ejemplo 6</h4>
<br/><br/><br/>
<form>
 <input type="text" id="nombre" value="Javier" />
 <input type="text" id="apellidos" value="Perez" />
</form>
<a href="#" onclick="document.getElementById('nombre').focus()">Nombre</a>
<a href="#" onclick="document.getElementById('apellidos').focus()">Apellidos</a> 

<h4>Ejemplo 7</h4>
<br/><br/><br/><input type="text" id="texto" />
<input type="button" value="Crear" onclick="crear()" />
<ul id="lista"></ul>
<script>

	function init(){
		
		document.write('<h1>Hello World</h1>');
		
		// Obtenemos el elemento status
		var el = document.getElementById("status");
		// Mostramos mediante una alerta el contenido del elemento
		console.info('Hemos cargado la variable' + el);
		var el2 = document.getElementById("status44444444");
		if (el2 == undefined){
			console.error('Elemento ' + el2 + 'no encontrado.' );
		}
		//alert('Hello World');
		// Obtenemos el elemento con id links var 
		links = document.getElementById("links"); 
		// Ahora obtenemos todos los elementos con tag A que hay 
		// dentro del elemento links var 
		as = links.getElementsByTagName("a"); 
		// Y finalmente recorremos el array de elementos para 
		// cambiarles el color a cada uno 
		for (var i=0; i<as.length; i++) { 
			as[i].style.color = 'green'; // negro 
		} 
		
		
	}
	
	function crear() {
		
		// Obtenemos el valor entrado en la caja de texto
		 var valor = document.getElementById("texto").value;
		// Creamos un nuevo elemento LI var
		li = document.createElement("li");
		// Añadimos el valor introducido al nuevo elemento
		li.innerHTML = valor;
		// Añadimos el elemento LI a la lista UL
		 var ul = document.getElementById("lista");
		 ul.appendChild(li);
		 // Vaciamos la caja de texto
		 document.getElementById("texto").value = "";
		}
	
	

	//Esperamos a cargar toda la pagina para llamar a la funcion de init
	window.onload =init();
	
</script>
<form action="index.jsp" ><input id="boton" type="submit" value="Volver al index"/></form>
<%@ include file="/includes/footer.jsp" %>
